<template>
  <div class="test-font">
    <div
      style="position:fixed;left:10px;top:10px;background:rgba(0,0,0,.5);color:#fff;"
    >
      {{ scrollTop }}
    </div>
    <div v-for="k in 200" :key="k">{{ msg }}</div>
  </div>
  <button class="test-button" @click="changeMsg">修改msg</button>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import hookScrollTop from "@/hooks/hookScrollTop";
export default defineComponent({
  setup() {
    const { scrollTop } = hookScrollTop(() => {
      console.log("onBottom");
    });
    const msg = ref("hello hooks");
    setTimeout(() => {
      msg.value = "1000ms after";
    }, 1000);
    const changeMsg = () => {
      msg.value = "this is change msg";
    };
    return {
      msg,
      scrollTop,
      changeMsg,
    };
  },
});
</script>
